<template>
  <div class="main">
    <section>
      <h2>{{ $t('Report') }}</h2>
      <el-card>
        <el-form ref="form" :model="report" :rules="rules" label-position="top">
          <el-form-item :label="$t('Type')" prop="type">
            <el-select v-model="report.type">
              <el-option v-for="(item,index) in DeviceTypeArray" :key="''+index" :value="item.value"
                :label="item.label" />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('Summary')" prop="summary">
            <el-input v-model="report.summary" />
          </el-form-item>
          <el-form-item :label="$t('Description')" prop="description">
            <el-input type="textarea" v-model="report.description" />
          </el-form-item>
          <el-form-item :label="$t('Screenshot')" prop="screenshot">
            <image-upload upload-uri="/device/submit-report/upload-image" :limit="3" :with-token="false"
              @input="handleImage">
            </image-upload>
          </el-form-item>
          <el-form-item :label="$t('Mobile')" prop="mobile">
            <el-input v-model="report.mobile" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="doReport">{{ $t('Submit') }}</el-button>
          </el-form-item>
        </el-form>
      </el-card>

    </section>
  </div>
</template>
<script>
  import {
    parseType
  } from '@/views/device/common'
  import submitReportAPI from '@/api/device/submit-report'
  export default {
    name: 'ReportPage',
    data() {
      const vm = this
      return {
        DeviceTypeArray: [{
            code: "Control",
            label: "中控",
            value: 17
          },
          {
            code: "Platform",
            label: "讲台",
            value: 15
          }
        ],
        report: {
          type: null,
          code: null,
          summary: null,
          description: null,
          screenshot: null,
          mobile: null
        },
        rules: {
          summary: [{
            required: true,
            trigger: 'blur',
            message: vm.$t('NotNull')
          }]
        }
      }
    },
    created() {
      const type = parseType(this.$route.query.code)
      this.report.type = type
    },
    methods: {
      handleImage(list) {
        var urls = ""
        for (var i = 0; i < list.length; i++) {
          urls += "," + list[i].url
        }
        this.report.screenshot = urls
      },
      doReport() {
        this.report.code = this.$route.query.code
        const vm = this
        this.$refs['form'].validate(valid => {
          if (!valid) {
            return
          }
          submitReportAPI.submit(this.report).then(res => {
            vm.$confirm(vm.$t("report.anonymouse_submit_sucessful")).then(() => {
              vm.$router.push('/')
            })
          })

        })
      }
    }
  }

</script>
<style scoped>
  .main {
    width: 360px;
    margin: 66px auto 0 auto;
  }

</style>
